<template>
  <div :class="{ disabled: disabled }">
    <el-input :value="defaultValue" suffix-icon="el-icon-edit" @focus="onOpen"></el-input>
    <el-dialog title="选择数据格式" :visible.sync="open" width="30%" append-to-body @close="close">
      <el-tabs v-model="form.current" @tab-click="tabClick">
        <el-tab-pane label="数值" name="1"></el-tab-pane>
        <el-tab-pane label="货币" name="2"></el-tab-pane>
        <el-tab-pane label="百分比" name="3"></el-tab-pane>
      </el-tabs>
      <div>
        <div class="item-wrap">
          <div class="title">样例</div>
          <el-input disabled :value="defaultValue"></el-input>
        </div>
        <div class="item-wrap">
          <div class="title">小数位数</div>
          <el-input-number
            v-model="form.num"
            controls-position="right"
            :min="0"
            :max="10"
            @change="parse"
          ></el-input-number>
        </div>
        <div v-if="form.current !== '3'" class="item-wrap">
          <div class="title">单位</div>
          <el-input v-if="form.current === '1'" v-model="form.unit" @change="parse"></el-input>
          <el-select v-if="form.current === '2'" v-model="form.unit" placeholder="请选择单位" clearable @change="parse">
            <el-option v-for="item in unitOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-if="form.current === '2'" class="item-wrap">
          <div class="title">货币标志</div>
          <el-select v-model="form.coinMark" placeholder="请选择货币标志" clearable @change="parse">
            <el-option v-for="item in coinType" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
        </div>
        <el-checkbox v-model="form.split" style="margin-top: 10px" @change="parse">使用千分位分隔符</el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { unitOptions, coinType, parse } from '@/utils/valueFormatter'
export default {
  name: 'ValueFormater',
  props: {
    value: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      open: false,
      defaultValue: 12345678000,
      calculateValue: 12345678000,
      unitOptions,
      coinType,
      form: {
        current: '1',
        num: 0,
        unit: '',
        split: false,
        coinMark: '',
      },
    }
  },
  mounted() {
    this.init()
    this.parse()
  },
  methods: {
    confirm() {
      this.$emit('input', JSON.stringify(this.form))
      this.open = false
    },
    close() {
      this.init()
      this.parse()
      this.open = false
    },
    parse() {
      this.defaultValue = parse(this.calculateValue, this.form)
    },
    onOpen() {
      this.init()
      this.parse()
      this.open = true
    },
    init() {
      let form
      if (this.value) {
        try {
          form = JSON.parse(this.value)
        } catch {
          console.error('格式错误')
          return
        }
        this.form = form
      } else {
        this.reset()
      }
    },
    tabClick() {
      this.form.num = 0
      this.form.unit = ''
      this.form.split = false
      this.form.coinMark = ''
      this.parse()
    },
    reset() {
      this.form = {
        current: '1',
        num: 0,
        unit: '',
        split: false,
        coinMark: '',
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.item-wrap {
  font-size: 14px;
  padding: 10px 0;

  .title {
    font-weight: bold;
    margin-bottom: 8px;
  }
}

::v-deep {
  .el-select {
    .el-input {
      .el-input__suffix {
        .el-icon-circle-close {
          display: none !important;
        }

        .el-input__suffix-inner {
          .el-icon-circle-close {
            display: inline-block !important;
          }
        }
      }
    }
  }
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
</style>
